<template>
  <div style="min-width:720px">
    <el-container>
      <el-container>
        <el-main>
          <search></search>
          <el-row>
            <el-col :span="1">
              <div class="grid-content bg-purple"><input type="checkbox"></div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">ID</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">用户名</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">管理员名</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple">状态</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-light">手机</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">添加时间</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">操作</div>
            </el-col>
          </el-row>
          <el-row v-for="(item,index) in adminData" :key="index">
            <el-col :span="1">
              <div class="grid-content bg-purple"><input type="checkbox"></div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">{{item.admin_id}}</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">{{item.admin_loginName}}</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">{{item.admin_name}}</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple" v-if="item.admin_status == true">启用</div>
              <div class="grid-content bg-purple" v-else>禁用</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-light">{{item.admin_phone}}</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">{{item.admin_addTime}}</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <el-button type="primary" icon="el-icon-edit" circle @click="$router.push(`/All/adminUpdata/${item._id}`)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del(item)"></el-button>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <page></page>
  </div>
</template>

<script>
import axios from "axios";
import search from "./search";//搜索框
import page from "./page";//分页
//使用vuex
import { createNamespacedHelpers } from "vuex";
const {mapState,mapMutations,mapGetters,mapActions} = createNamespacedHelpers("adminData");

export default {
  components:{
    search,page
  },
  data() {
    return {
      
    };
  },
  computed:{
    ...mapState(['adminData'])
  },
  mounted(){
    this.getAdminDataAsync();
  },
  methods:{
    ...mapActions(['getAdminDataAsync']),
    del(item){
      item.admin_del = 1;
      axios
      .delete('/admin/del',{data:{_id:item._id,admin_del:item.admin_del}})
      .then(res =>{
        this.getAdminDataAsync();
      })
    }
  }
};
</script>

<style scoped>
.el-main {
  text-align: left;
  line-height: 0;
  margin-left: 20px;
  margin-top: 8px;
}

/* 列表样式 */
 .el-row {
    margin-bottom: 8px;
  }
  .el-col {
    border-radius: 4px;
    line-height: 36px;
    text-align: center;
    color: #333;
    font-size: 12px;
    height: 100%;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>